<!doctype html>
<html>
<head>
<title>New Page</title>
<link rel="stylesheet"
	href="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css">
<script type="text/javascript"
	src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript"
	src="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
<script src="../lightbox/js/lightbox-2.6.min.js"></script>
<link href="../lightbox/css/lightbox.css" rel="stylesheet" />
<script>
	$(function() {
		var $original = $("#original");
		var $gallery = $("#gallery");
		var mykey = "6ef812fec1be03cc8113f7600d0ca50d";

		$.ajax({
			url : " http://api.flickr.com/services/rest/",
			type : "GET",
			dataType : "XML",
			data : {
				method : "flickr.interestingness.getList",
				api_key : mykey,
				format : "rest"
			},
			success : function(res) {
				console.log("success", "res", res);
				var $inner=$(".carousel-inner");
				//조합법:http://farm{farm-id}.staticflickr.com/{server-id}/{id}_{secret}.jpg
				$(res).find("photo").each(
						function(index) {
							//$(this)로 <photo ...> 태그 하나에 접근
							farm = $(this).attr("farm");
							server = $(this).attr("server");
							id = $(this).attr("id");
							secret = $(this).attr("secret");
							title = $(this).attr("title");
							src = "http://farm" + farm + ".staticflickr.com/"
									+ server + "/" + id + "_" + secret
									+ "_s.jpg";
							originalSrc = "http://farm" + farm
									+ ".staticflickr.com/" + server + "/" + id
									+ "_" + secret + ".jpg";  
							// a 태그로 img 태그를 감싸고 data-lightbox속성 추가
							a = $("<a data-lightbox='gal'>").attr({
								href : originalSrc,
								title : title
							});
							img = $("<img id='small'>").attr({
								src : src,
								title : title,
								href : originalSrc
							});
							a.append(img);
							$gallery.append(a);
							
							$item=$("<div class='item'>"); 
							$caption=$("<div class='carousel-caption'>");
							$caption.text(title);
							$img=$("<img>").attr("src",originalSrc);
							$item.append($img).append($caption);
							$inner.append($item); 
							console.log("inner",$inner);  
						});
				//var $inner=$(".carousel-inner");
				$('.carousel').carousel();				
			},
			error : function(xhr, status) {
				console.log("error", xhr, status);
			},
			complete : function(xhr, status) {
				console.log("complete", xhr, status);
			}
		});

	});
</script>
<style type="text/css">
.slider{ width:40% ; margin: auto; }  
.navbar .brand {
	padding: 7px 10px;
}

.features .well p:last-child {
	margin-bottom: 0;
}

@media screen and(min-width: 960px) {
	body {
		padding-top: 50px;
	}
}
</style>
</head>

<body>
	<div class="navbar navbar-fixed-top">
		<div class="navbar-inner">
			<div class="container">
				<a class="btn btn-navbar" data-toggle="collapse"
					data-target=".nav-collapse"> <span class="icon-bar"></span> <span
					class="icon-bar"></span> <span class="icon-bar"></span>
				</a><a class="brand" href="#"><img src="images/logo.svg" width="100"
					alt="Divshot"></a>
				<div class="nav-collapse collapse">
					<ul class="nav">
						<li class="active"><a class="active" href="index.html">Getting
								Started</a></li>
						<li><a href="http://www.divshot.com/">About</a></li>
					</ul>
				</div>
				<ul class="nav pull-right visible-desktop">
					<li><a>Divshot Docs &raquo;</a></li>
				</ul>
			</div>
		</div>
	</div>
	<div class="container">
		<h1 class="page-header">Welcome to Divshot!</h1>
		<div class="container slider" style="width:70%; margin: auto;">
			<div id="carousel-example-generic" class="carousel slide">
				<!-- Indicators -->
				<ol class="carousel-indicators">
					<li data-target="#carousel-example-generic" data-slide-to="0"
						class="active"></li>
					<li data-target="#carousel-example-generic" data-slide-to="1"></li>
					<li data-target="#carousel-example-generic" data-slide-to="2"></li>
				</ol>

				<!-- Wrapper for slides -->
				<div class="carousel-inner">
					<div class="item active">
						<img src="..." alt="">
						<div class="carousel-caption">...</div>
					</div>
					...
				</div>

				<!-- Controls -->
				<a class="left carousel-control" href="#carousel-example-generic"
					data-slide="prev"> <span class="icon-prev"></span>
				</a> <a class="right carousel-control" href="#carousel-example-generic"
					data-slide="next"> <span class="icon-next"></span>
				</a>
			</div>
		</div>
		<div class="container">
			<div id="gallery"></div>
		</div>
		<p class="lead muted">
			Divshot is a fast, intuitive way to build web application interfaces.
			This guide will help you get started, but for more in-depth
			information, head over to<a href="http://docs-preview.divshot.com/">docs-preview.divshot.com</a>
			!
		</p>
		<div class="alert alert-info">
			<button type="button" class="close" data-dismiss="alert">&times;</button>
			<b>Note:</b> &nbsp;To follow links on this page to external
			resources, click the "Run Preview" button in the toolbar above (it
			looks like a play button) and then click the link.
		</div>
		<div class="features row">
			<div class="span4">
				<div class="well">
					<p>
						<b>Projects</b> are the building blocks of Divshot. You can think
						of a project like a folder on your hard drive. To create new
						projects or browse existing ones, click on the project name in the
						top left corner.
					</p>
					<p>
						<a class="btn btn-primary btn-small btn-block"
							href="http://docs-preview.divshot.com/guides/projects.html"
							target="_blank">Visit the Projects Guide</a>
					</p>
				</div>
				<div class="well">
					<p>
						<b>Organizations</b> allow you to collaborate on Divshot projects
						with your whole team! To create and manage organizations, click
						the project name in the top left corner of the screen.
					</p>
					<p>
						<a class="btn btn-primary btn-small btn-block"
							href="http://docs-preview.divshot.com/guides/organizations.html"
							target="_blank">Visit the Organizations Guide</a>
					</p>
				</div>
				<div class="well">
					<p>
						<b>Export or Share Your Project</b> by using the download and
						share buttons at the top of the left-hand Navigator pane.
					</p>
					<p>
						<a class="btn btn-block btn-primary btn-small"
							href="http://docs-preview.divshot.com/guides/export.html"
							target="_blank">Visit the Export and Sharing Guide</a>
					</p>
				</div>
			</div>
			<div class="span4">
				<div class="well">
					<p>
						<b>Components</b> allow you to quickly build interfaces. To add
						things to the page, simply drag a component from the menu on the
						right onto the page. Try it now!
					</p>
					<p>
						<a class="btn btn-primary btn-small btn-block"
							href="http://docs-preview.divshot.com/guides/components.html"
							target="_blank">Visit the Components Guide</a>
					</p>
				</div>
				<div class="well">
					<p>
						<b>Content&nbsp;Text</b> can be edited by double-clicking. Single
						click will select a component and double-click will allow you to
						edit text.
					</p>
					<p>
						<a class="btn btn-block btn-primary btn-small"
							href="http://docs-preview.divshot.com/guides/content.html"
							target="_blank">Visit the Content Editing Guide</a>
					</p>
				</div>
				<div class="well">
					<p>
						<b>Edit the Source</b> &nbsp;by opening the Source Editor in the
						toolbar above. Divshot allows you to edit the <i
							style="font-weight: bold;">full page of HTML</i> &nbsp;including
						scripts, stylesheets, and more.
					</p>
					<p>
						<a class="btn btn-block btn-primary btn-small"
							href="http://docs-preview.divshot.com/guides/source.html"
							target="_blank">Visit the Source Editing Guide</a>
					</p>
				</div>
			</div>
			<div class="span4">
				<div class="well">
					<p>
						<b>Uploading Files</b> &nbsp;allows you to add your own images,
						stylesheets, scripts, and more. Just click on the "plus" icon in
						the left-hand Navigator pane and choose "Upload File"
					</p>
					<p>
						<a class="btn btn-primary btn-small btn-block"
							href="http://docs-preview.divshot.com/guides/scripts-and-styles.html"
							target="_blank">Visit the Scripts and Styles Guide</a>
					</p>
				</div>
				<div class="well">
					<p>
						<b>Create New Pages</b> &nbsp;by clicking on the "plus" icon in
						the Navigator pane and selecting "New File." You can then create
						HTML, CSS, and JS files to add to your project.
					</p>
					<p>
						<a class="btn btn-primary btn-small btn-block"
							href="http://docs-preview.divshot.com/guides/pages.html"
							target="_blank">Visit the Pages Guide</a>
					</p>
				</div>
			</div>
		</div>
	</div>
	<div class="navbar"></div>
</body>

</html>